import { useQuery } from '@tanstack/react-query'
import { Card, Row, Col, Statistic, Spin, message } from 'antd'
import {
  ApiOutlined,
  ThunderboltOutlined,
  AlertOutlined,
  CheckCircleOutlined,
} from '@ant-design/icons'
import { getHealth, getStatistics } from '../api/gateway'
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts'

export default function Dashboard() {
  const { data: health, isLoading: healthLoading } = useQuery({
    queryKey: ['health'],
    queryFn: getHealth,
    refetchInterval: 5000,
  })

  const { data: statistics, isLoading: statisticsLoading } = useQuery({
    queryKey: ['statistics'],
    queryFn: () => getStatistics(),
    refetchInterval: 5000,
  })

  if (healthLoading || statisticsLoading) {
    return (
      <div style={{ textAlign: 'center', padding: '50px' }}>
        <Spin size="large" />
      </div>
    )
  }

  return (
    <div>
      <h1 style={{ marginBottom: '24px' }}>仪表盘</h1>
      <Row gutter={[16, 16]}>
        <Col xs={24} sm={12} lg={6}>
          <Card>
            <Statistic
              title="服务状态"
              value={health?.status === 'ok' ? '正常' : '异常'}
              prefix={<CheckCircleOutlined style={{ color: '#52c41a' }} />}
            />
          </Card>
        </Col>
        <Col xs={24} sm={12} lg={6}>
          <Card>
            <Statistic
              title="总请求数"
              value={statistics?.total_requests || 0}
              prefix={<ApiOutlined />}
            />
          </Card>
        </Col>
        <Col xs={24} sm={12} lg={6}>
          <Card>
            <Statistic
              title="活跃连接"
              value={statistics?.active_connections || 0}
              prefix={<ThunderboltOutlined />}
            />
          </Card>
        </Col>
        <Col xs={24} sm={12} lg={6}>
          <Card>
            <Statistic
              title="错误率"
              value={((statistics?.error_rate || 0) * 100).toFixed(2)}
              suffix="%"
              prefix={<AlertOutlined style={{ color: '#ff4d4f' }} />}
            />
          </Card>
        </Col>
      </Row>
      <Row gutter={[16, 16]} style={{ marginTop: '24px' }}>
        <Col xs={24} lg={12}>
          <Card title="请求趋势">
            <ResponsiveContainer width="100%" height={300}>
              <LineChart data={statistics?.request_trend || []}>
                <CartesianGrid strokeDasharray="3 3" />
                <XAxis dataKey="time" />
                <YAxis />
                <Tooltip />
                <Line
                  type="monotone"
                  dataKey="requests"
                  stroke="#1890ff"
                  strokeWidth={2}
                />
              </LineChart>
            </ResponsiveContainer>
          </Card>
        </Col>
        <Col xs={24} lg={12}>
          <Card title="系统信息">
            <p>服务名称: {health?.service || 'api-gateway'}</p>
            <p>运行时间: 24 小时 30 分钟</p>
            <p>版本: 1.0.0</p>
          </Card>
        </Col>
      </Row>
    </div>
  )
}

